<template>
  <page-header-wrapper :title="false">
    <a-card title="IP 列表（禁止客户资源入库的 IP）">
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="ip地址">
                <a-input v-model="queryParam['filter[ip]']"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click='resetIpForm'>重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <template slot='extra'>
        <a-button type='primary' icon='plus' @click='onModal'>添加IP</a-button>
      </template>
      <s-table
        bordered
        ref="table"
        :columns="ipColumns"
        :row-key="(record) => record.id"
        :data="ipData"
      >
      <template slot='action' slot-scope="text, record">
        <a-button size="small" type="danger" @click='deleteIp(record.id)'>删除</a-button>
      </template>
      </s-table>
    </a-card>
    <a-modal
      title='添加IP黑名单'
      v-model='visible'
      @ok="addIP"
    >
      <a-form-model
        :model="ipForm"
      >
        <a-form-model-item label="ip">
          <a-input type="text" v-model="ipForm['ip[ip]']" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/ip'
import { ipList, addIp, delIp } from '@/api/other'
export default {
  components: {
    STable
  },
  name: 'IpConfig',
  data () {
    return {
      ipColumns: col.ip,
      ipData: parameters => {
        return ipList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      visible: false,
      ipForm: {},
      queryParam: {}
    }
  },
  methods: {
    onModal () {
      this.visible = true
    },
    addIP () {
      const app = this
      addIp(app.ipForm).then(res => {
        if (res.status === 0) {
          app.$refs.table.refresh(true)
          app.visible = false
          app.ipForm = {}
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    deleteIp (id) {
      const app = this
      app.$confirm({
        title: '确定删除此条ip',
        onOk: () => {
          delIp(id).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    },
    resetIpForm () {
      const app = this
      app.queryParam = {}
      app.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
